<template>
  <div class="wrap">
      <header>
        <span :class="{ active: curIndex === index }" @click="curIndex = index" v-for="(item, index) in list" :key="item">{{ item }}</span>
      </header>
  </div>
</template>

<script>
export default {
  data () {
    return {
      curIndex: 0,
      list: ['推荐', '音乐', 'Showtime', 'Mv', '二次元', '舞蹈', '游戏']
    }
  }
}
</script>

<style lang="scss" scoped>
    @import '../../style/rem.scss';
    header {
        width: 100%;
        height: rem(200);
        display: flex;
        overflow: hidden;
        background: tomato;
        text-align: center;
        span {
            width: rem(400);
            height: rem(150);
            border-right: 1px solid red($color: #000000);
            line-height: rem(150);
            color: white;
            font-size: 12px;
        }
        .active {
            font-weight: bold;
            border-bottom: rem(10) solid white;
        }
    }
</style>
